<template>
    <div v-loading="loading1" style="background:#A9AAAC;width: 100%;max-height:100%;overflow: auto;padding:30px;margin;0px;font-size:15px;margin-bottom:10px;" >
        <el-row >
            <el-col :span="24" style="border:0px;">
                <div class="grid-content"  >
                    <div style="text-align:center;margin:auto;font-size:30px;">左舵机、右舵机</div>
                </div>
            </el-col>
        </el-row>
        <el-row style="margin-bottom:20px">
          <el-col :span="24" style="text-align:center;align-items:center;align-content:center;justify-content: center;  height:300px;margin-top:50px;margin-bottom:30px">
           
            <div style="position: relative;">
               <img :src="img" style="width:80%;height: 90%;margin-bottom:40px;"/>
               
            </div>
             
            
          </el-col>
        </el-row>
        <el-row >
            <el-col :span="11" style="border:1px solid black;">
                <h1 style="text-align:center; padding:20px ; align-content:center">左舵机报警显示</h1>
                
                <div style="display:flex;flex-direction: row;justify-content: space-around;">
                    <div style="">
                        <div  v-for="(item,index) in data.one" :key="index" style="padding:5px;display:flex;text-align:center;align-items:center;margin-top:1px;margin-left:20px">
                                <div :class="{'alarmDiv':getFlash(item) }"  :style="{'width':'20px','height':'20px','border-radius':'50%','background':getColor(item)}"></div>
                                <div :style="{'margin-left':'20px',color:getColorName(item)}">{{item.deviceName}}</div>
                        </div>
                    </div>
                    <div>
                        <div  v-for="(item,index) in data.two" :key="index" style="padding:5px;display:flex;text-align:center;align-items:center;margin-top:1px;margin-left:20px">
                                <div :class="{'alarmDiv':getFlash(item) }"  :style="{'width':'20px','height':'20px','border-radius':'50%','background':getColor(item)}"></div>
                                <div :style="{'margin-left':'20px',color:getColorName(item)}">{{item.deviceName}}</div>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="2" style="border:1px solid #A9AAAC;">
            </el-col>
            <el-col :span="11" style="border:1px solid black;">
                <h1 style="text-align:center; padding:20px ; align-content:center;">右舵机报警显示</h1>
                
                <div style="display:flex;flex-direction: row;justify-content: space-around;">
                    <div style="">
                        <div  v-for="(item,index) in data.three" :key="index" style="padding:5px;display:flex;text-align:center;align-items:center;margin-top:1px;margin-left:20px">
                                <div :class="{'alarmDiv':getFlash(item) }"  :style="{'width':'20px','height':'20px','border-radius':'50%','background':getColor(item)}"></div>
                                <div :style="{'margin-left':'20px',color:getColorName(item)}">{{item.deviceName}}</div>
                        </div>
                    </div>
                    <div>
                        <div  v-for="(item,index) in data.four" :key="index" style="padding:5px;display:flex;text-align:center;align-items:center;margin-top:1px;margin-left:20px">
                                <div :class="{'alarmDiv':getFlash(item) }"  :style="{'width':'20px','height':'20px','border-radius':'50%','background':getColor(item)}"></div>
                                <div :style="{'margin-left':'20px',color:getColorName(item)}">{{item.deviceName}}</div>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
        
    </div>
</template>
<script>
import {listDevs} from  "@/api/system/device";
import { mapState } from "vuex";
import rightAxis from '@/assets/images/helm.png'
export default {
 name: "emergencyBoard",
 created() {
    if(!this.timer){
    this.timer = setInterval(() => {
        this.init()
    }, 3000);//3秒刷新次
 }else{
    this.init()
 }
 },
 beforeDestroy() {

if(this.timer){
    clearInterval(this.timer);
    this.timer=null;
  }
},
 computed: {
  ...mapState("app", {   // 对象形式
      alarmList: "alarmList",
      lightSwitch:"lightSwitch",
      extExpSwitch:"extExpSwitch"
  })
},
 methods:{

    getFlash(row){
        //2、报警消息时，闪烁
        let f = this.alarmList.some(alarm=>
            alarm ==row.deviceId
        );
        if(f){
          if(row.displayAlarm=="2"){//告警
            return true;
          }
        }
        if(this.lightSwitch=='1'  ||this.extExpSwitch=="1")
        {//1、试灯打开
          // console.log("extExpSwitch=="+this.extExpSwitch)
          if(row.displayAlarm=="2"){//告警
            return true;
          }
        }
          return false;
      },
      getColorName(row){
        //告警消息
        if("2"== row.displayAlarm){
            let f = this.alarmList.some(alarm=>
            alarm ==row.deviceId
            );
            if(f){
                return 'red';
            }
            //3、显示设备状态颜色
            if(row.warnStatus=='1'||row.warnStatus=='0'){
                return 'black';
            }
            return 'red'
        }
        return "black";
        
      },
      getColor(row){
        if("2"== row.displayAlarm){  //告警类型
          //告警消息
          let f = this.alarmList.some(alarm=>
            alarm ==row.deviceId
          );
          if(f){//2、有报警通知，则显示灯的颜色
            return row.lightColor;
          }
        }
        if(this.lightSwitch=='1' ||this.extExpSwitch=="1"){//1、试灯打开，显示灯的颜色
            console.log("extExpSwitch=="+this.extExpSwitch)
            return row.lightColor;
        }
        //3、显示设备状态颜色
        if(row.warnStatus=='1'||row.warnStatus=='0'){
          return 'grey';
        }
          return row.lightColor;
      },
    init(){
        listDevs({"deptIds":"04,10"}).then(response=>{
          this.loading1=false
            console.log(response)
            let dataArr = response.data;
            if(dataArr){
                console.log(dataArr)
                this.data.one= dataArr.filter(item=>{
                    return   item.deviceName.startsWith("1#") //开关量
                    }).sort((a,b)=> {
                    return a.systemId.split("-")[1]-b.systemId.split("-")[1]})
                    console.log(this.data.one)
                this.data.two= dataArr.filter(item=>{
                    return   item.deviceName.startsWith("2#") //开关量
                    }).sort((a,b)=> {
                    return a.systemId.split("-")[1]-b.systemId.split("-")[1]})   
                this.data.three= dataArr.filter(item=>{
                    return   item.deviceName.startsWith("3#") //开关量
                    }).sort((a,b)=> {
                    return a.systemId.split("-")[1]-b.systemId.split("-")[1]})  
                this.data.four= dataArr.filter(item=>{
                    return   item.deviceName.startsWith("4#") //开关量
                    }).sort((a,b)=> {
                    return a.systemId.split("-")[1]-b.systemId.split("-")[1]})  
            }
            
        })
    },
 
   
 },
 data(){
   return{
    loading1:true,
    img:rightAxis,
       loading :false,
       total: 0,
       data:{
        one:[],
        two:[],
        three:[],
        four:[]
       },

        timer:null,
        deptId:this.$route.query.depCode,
 }
}
}
</script>
<style scoped>


.tip {
 margin: 2px;
   padding: 1px;
   color: rgb(52 88 124 / 75%);

   border-radius: 20% 0% 40% 0%;
   background-color: rgb(122 132 216 / 19%);
   position: absolute;float:left;margin: 2px;
}

.el-row {
   margin-bottom: 20px;

 }
 .el-col {
   border-radius: 4px;
 }
 .bg-purple-dark {
   background: #99a9bf;
 }
 .bg-purple {
   background: #d3dce6;
 }
 .bg-purple-light {
   background: #e5e9f2;
 }


.parent {
 display: flex;
 flex-wrap: wrap;
 flex-direction: row;
}
.child{
 flex-basis: 20%;
}
.alarmDiv{
      display:block;
      -webkit-animation-name: imageAnim;
      -webkit-animation-duration: 0.5s;
      -webkit-animation-iteration-count: infinite;
      -webkit-animation-direction: alternate;
      -webkit-animation-timing-function: ease;
      -webkit-animation-play-state: running;
  }
  @-webkit-keyframes imageAnim{
      0% {opacity: 1;}
      50% {opacity: 0.5;}
      100% {opacity: 0;}
  }
  .grid-content {
    text-wrap:wrap;
    font-size:clamp(0.7rem, 0.489rem + 1.05vw, 1.2rem);
    }


</style>
